<template>
    <div class="huoBox">
         <header>
             <p class="headTitle">精彩活动</p>
         </header>
         <div class="max-content">
                <!-- banner图片 -->
                <div class="banner">
                    <img src="./image/banner.png" alt="">
                    <div class="banner_right">
                           <ul>
                              <li class="active">
                                  年在顺义摄影展
                              </li>
                              <li>
                                  青少年活动中心参观游玩
                              </li>
                               <li>
                                  有朋远方来书法沙龙
                              </li>
                               <li>
                                  春萍书法社
                              </li>
                               <li>
                                  上善若水书法社
                              </li>
                           </ul>
                    </div>
                </div>
                <!-- 搜索 -->
                <div class="search">
                    <el-input class="input" ref="input" @focus='focusInput' v-model="input" placeholder="请输入内容"></el-input>
                    <div class="icon" @click="search">
                        <i class="el-icon-search"></i>
                    </div>
                    <div class="selectValue" v-show="selectShow&&input==''">
                         <ul>
                             <li v-for="(item,inedx) in valueArr" :key="inedx" @click.prevent="input = item" ref="li">{{ item }}</li>
                             <li class="clear">
                                 <p @click.prevent="clear();" ref="li">清空搜索记录</p>
                             </li>
                         </ul>
                    </div>
                </div>

                <!-- 分类筛选 -->
                <div class="typeFilter">
                    <div class="typeItem">
                        <span class="typeTitle">活动类型:</span>
                        <ul>
                            <li style="margin: 0;" :class="active==0?'active':''" @click="active = 0">
                                全部
                            </li>
                            <li :class="active==index+1?'active':''" v-for="(item,index) in typeArr" @click="active=index+1" :key="index">
                                  {{item.name}}
                            </li>
                        </ul>
                    </div>
                     <div class="typeItem">
                        <span class="typeTitle">举办场地:</span>
                        <ul>
                            <li :class="active1==0?'active1':''" @click="active1 = 0">
                                全部
                            </li>
                            <li :class="active1==index+1?'active':''" v-for="(item,index) in typeArr1" @click="active1=index+1" :key="index">
                                  {{item.name}}
                            </li>
                        </ul>
                    </div>
                </div>

                <!-- nav -->
                <nav>
                    <ul>
                        <li>智能排序</li>|
                        <li>最新发布</li>|
                        <li>人气最高</li>|
                        <li>评价最好</li>
                    </ul>
                </nav>



                <!-- 内容 -->
                <div class="main">
                    <ul>
                        <li>
                            <div class="headMain">
                               <img src="./image/listitem.png" alt="">
                               <p class="type imgItem">展览</p>
                               <p class="money imgItem">免费</p>
                               <p class="num">余60人</p>
                            </div>
                            <div class="bottomMain">
                                <p class="title">顺义胜利街道书画展厅</p>
                                <p class="time">活动时间：2021-03-10 09:00-17：00</p>
                                <p class="address">活动地址: 顺义区文化馆书画展厅</p>
                            </div>
                            <button>立即预约</button>
                        </li>
                        <li>
                            <div class="headMain">
                               <img src="./image/listitem2.png" alt="">
                               <p class="type imgItem">展览</p>
                               <p class="money imgItem">免费</p>
                               <p class="num">余60人</p>
                            </div>
                            <div class="bottomMain">
                                <p class="title">顺义胜利街道书画展厅</p>
                                <p class="time">活动时间：2021-03-10 09:00-17：00</p>
                                <p class="address">活动地址: 顺义区文化馆书画展厅</p>
                            </div>
                            <button>立即预约</button>
                        </li>
                        <li>
                            <div class="headMain">
                               <img src="./image/listitem3.png" alt="">
                               <p class="type imgItem">展览</p>
                               <p class="money imgItem">免费</p>
                               <p class="num">余60人</p>
                            </div>
                            <div class="bottomMain">
                                <p class="title">顺义胜利街道书画展厅</p>
                                <p class="time">活动时间：2021-03-10 09:00-17：00</p>
                                <p class="address">活动地址: 顺义区文化馆书画展厅</p>
                            </div>
                            <button>立即预约</button>
                        </li>
                        <li>
                            <div class="headMain">
                               <img src="./image/listitem.png" alt="">
                               <p class="type imgItem">展览</p>
                               <p class="money imgItem">免费</p>
                               <p class="num">余60人</p>
                            </div>
                            <div class="bottomMain">
                                <p class="title">顺义胜利街道书画展厅</p>
                                <p class="time">活动时间：2021-03-10 09:00-17：00</p>
                                <p class="address">活动地址: 顺义区文化馆书画展厅</p>
                            </div>
                            <button>立即预约</button>
                        </li>
                        <li>
                            <div class="headMain">
                               <img src="./image/listitem2.png" alt="">
                               <p class="type imgItem">展览</p>
                               <p class="money imgItem">免费</p>
                               <p class="num">余60人</p>
                            </div>
                            <div class="bottomMain">
                                <p class="title">顺义胜利街道书画展厅</p>
                                <p class="time">活动时间：2021-03-10 09:00-17：00</p>
                                <p class="address">活动地址: 顺义区文化馆书画展厅</p>
                            </div>
                            <button>立即预约</button>
                        </li>
                        <li>
                            <div class="headMain">
                               <img src="./image/listitem3.png" alt="">
                               <p class="type imgItem">展览</p>
                               <p class="money imgItem">免费</p>
                               <p class="num">余60人</p>
                            </div>
                            <div class="bottomMain">
                                <p class="title">顺义胜利街道书画展厅</p>
                                <p class="time">活动时间：2021-03-10 09:00-17：00</p>
                                <p class="address">活动地址: 顺义区文化馆书画展厅</p>
                            </div>
                            <button>立即预约</button>
                        </li>
                         <li>
                            <div class="headMain">
                               <img src="./image/listitem.png" alt="">
                               <p class="type imgItem">展览</p>
                               <p class="money imgItem">免费</p>
                               <p class="num">余60人</p>
                            </div>
                            <div class="bottomMain">
                                <p class="title">顺义胜利街道书画展厅</p>
                                <p class="time">活动时间：2021-03-10 09:00-17：00</p>
                                <p class="address">活动地址: 顺义区文化馆书画展厅</p>
                            </div>
                            <button>立即预约</button>
                        </li>
                        <li>
                            <div class="headMain">
                               <img src="./image/listitem2.png" alt="">
                               <p class="type imgItem">展览</p>
                               <p class="money imgItem">免费</p>
                               <p class="num">余60人</p>
                            </div>
                            <div class="bottomMain">
                                <p class="title">顺义胜利街道书画展厅</p>
                                <p class="time">活动时间：2021-03-10 09:00-17：00</p>
                                <p class="address">活动地址: 顺义区文化馆书画展厅</p>
                            </div>
                            <button>立即预约</button>
                        </li>
                    </ul>
                     <!-- 分页 -->
                <el-pagination
                class="pagination"
                background
                layout="total, sizes, prev, pager, next, jumper"
                prev-text="上一页"
                next-text="下一页"
                :total="1000">
                </el-pagination>

                </div>


               
         </div>
    </div>
</template>

<script>    

export default {
data() {
    return {
      input:"", //搜索
      valueArr:[],
      selectShow:false,
      active:0,
      active1:0,
      typeArr:[{name:"演出"},{name:"讲座"},{name:"展览"},{name:"赛事"},{name:"阅读"},{name:"放映"},{name:"其他"}],
      typeArr1:[{name:"演出"},{name:"讲座"},{name:"展览"},{name:"赛事"},{name:"阅读"},{name:"放映"},{name:"其他"},{name:"演出"},{name:"讲座"},{name:"展览"},{name:"赛事"},{name:"阅读"},{name:"放映"},{name:"其他"}],
    }
},
//生命周期 - 创建完成（访问当前this实例）
created() {
    
},
watch:{
    valueArr:{
        handler(newValue,oldValue){
            if(newValue.length == 0){
                this.selectShow = false
            }
        }
    },
    input:{
        handler(newValue,oldValue){
            if(newValue == '' && this.valueArr.length !=0){
                this.selectShow = true
            }
        }
    }
},
//生命周期 - 挂载完成（访问DOM元素）
mounted() {
     document.querySelector('input').addEventListener('blur',(event)=>{ //监听失去焦点
         setTimeout(()=>{
            this.selectShow = false
         },400)
    })
},
methods:{
    focusInput(){ //搜索聚焦
        if(this.valueArr.length != 0){
           this.selectShow = true
        }
    },
    search(){ //搜索
        this.valueArr.map((item,index)=>{
             if(item == this.input){
                 console.log(item)
                 this.valueArr.splice(index,1)
             }
        })
        this.valueArr.unshift(this.input)

    },
    clear(){//清空搜索记录
        this.valueArr = []
        document.querySelector('input').removeEventListener('blur')
    }
}
}
</script>
<style scoped lang="less">
/* @import url(); 引入css类 */
.huoBox{
    min-width: 1200px;
    width: 100%;
    background-color: #F9F9F9;
    header{
        width: 100%;
        height: 309px;
        box-sizing: border-box;
        padding-top: 222px;
        background: url('./image/background.png')no-repeat center center;
        .headTitle{
            // width: 130px;
            // max-width: 1400px;
            min-width: 1200px;
            width: 72%;
            margin: 0 auto;
            font-size: 33px;
            font-family: Adobe Heiti Std;
            font-weight: normal;
            color: #FFFFFF;
        }
    }
    .max-content{
        // max-width: 1400px;
        min-width: 1200px;
        width: 72%;
        margin: 20px auto;
        // 轮播
        .banner{
            width: 100%;
            display: flex;
            margin: 0 auto;
            img{
                width: 75%;
                min-width: 956px;
            }
            div{
                width: 25%;
                background: url('./image/bannerRight.png');
                ul{
                    background: url('./image/bannerright2.png');
                    li{
                        width: 100%;
                        text-align: center;
                        height: 121px;
                        font-size: 22px;
                        font-family: PingFang SC;
                        font-weight: 300;
                        color: #FAD5A5;
                        line-height: 121px;
                        opacity: 0.61;
                    }
                    .active{
                        width: 100%;
                        height: 121px;
                        background: #37251B;
                        color: #F19417;
                        opacity: 0.52;
                    }
                }
            }
        }
        
     }
     /deep/.el-input__inner:focus{
        border:1px solid #F19417!important;
    }
    .selectValue{
        width: 300px;
        position: absolute;
        top: 40px;
        right: 60px;
        z-index: 222;
        background: #fff;
        box-shadow: 0px 4px 10px 0px rgba(64, 45, 20, 0.05);
        border-radius: 0px 0px 4px 4px;
        box-sizing: border-box;
        padding: 10px;
        ul{
            color: #A1A1A1;
            li:hover{
              color: #F19417;
            }
        }
        .clear{
            color: #F19417;
            cursor: pointer;
            p{
                text-align: right;
            }
        }
    }
}
.typeFilter{
    background-color: #fff;
    height: 171px;
    width: 100%;
    box-sizing: border-box;
    padding: 30px 43px;
    .typeItem{
        width: 100%;
        height: 60px;
        display: flex;
        // align-items: center;
        // ul{
        //     // display: flex;
        //     // width: 100%;
        //  }
        li{
            width: 70px;
            float: left;
            height: 30px;
            line-height: 30px;
            font-size: 18px;
            font-family: PingFang SC;
            font-weight: 300;
            color: #333333;
            text-align: center;
            margin-left: 20px;
            cursor:pointer;
            margin-bottom: 10px;
        }
        .active{
            background: #F19417;
            border-radius: 6px;
            color: white;
        }
        .active1{
            background: #F19417;
            border-radius: 6px;
            color: white;
        }
    }
    .typeTitle{
        display: block;
        width: 108px;
        // height: 17px;
        font-size: 18px;
        font-family: PingFang SC;
        font-weight: 300;
        color: #333333;
        // line-height: 60px;
    }
    
}
nav{
    width: 100%;
    height:42px;
    background-color: #fff;
    margin: 20px 0;
    ul{
        display: flex;
        align-items: center;
        height: 42px;
        margin-left: 43px;
        li{
            width: 100px;
            text-align: center;
            font-size: 18px;
            font-family: PingFang SC;
            font-weight: 300;
            color: #333333;
            line-height: 60px;
        }
    }
}


.main{
  width: 100%;
  margin-top: 20px;
  height:900px;
  ul{
      width: 100%;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      li{
        width: 24%;
        height: 400px;
        background: #FFFFFF;
        display: flex;
        flex-direction: column;
        align-items: center;
        border-radius: 5px;
        margin-bottom: 20px;
        p{
            width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .headMain{
            position: relative;
            width: 100%;
            font-size: 16px;
            font-family: Adobe Heiti Std;
            font-weight: normal;
            color: #FFFFFF;
            img{
                width: 100%;
            }
        }
        .imgItem{
           width: 50px;
            height: 21px;
            background: #F19417;
            border-radius: 4px;
            color:white;
            text-align: center;
            line-height: 21px;
        }
        .type{
            position: absolute;
            left: 11px;
            top: 158px;
        }
        .money{
            position: absolute;
            left: 84px;
            top: 158px;
        }
        .num{
            width: 100px;
            height: 38px;
            // background: #000000;
            opacity: 0.5;
            border-radius: 5px;
            color: white;
            position: absolute;
            right: 0;
            bottom: 5px;
            text-align: center;
            line-height: 38px;
        }
      }
      .bottomMain{
          width: 100%;
          box-sizing: border-box;
          padding: 16px;
          .title{
            font-size: 22px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #333333;
            line-height: 30px;
            margin-bottom: 20px;
          }
          .time{
            font-size: 15px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #999999;
            line-height: 18px;
            margin-bottom: 10px;
          }
           .address{
            font-size: 15px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #999999;
            line-height: 18px;
           }
      }
      button{
        width: 120px;
        height: 36px;
        background: #F19417;
        border-radius: 4px;
        color: white;
        border: none;
        outline: none;
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: bold;
        margin: 0 auto;
      }
      
  }
}
.pagination /deep/ .active{
     background-color: #F19417!important;
}

.pagination{
    margin: 0 auto;
    width: 70%;
}

</style>
<style lang="less">


    //搜索
        .search{
             width: 100%;
             height: 36px;
             position: relative;
             margin: 20px 0;
            .icon{
                width: 60px;
                height: 41px;
                background: #F19417;
                border-radius: 0px 4px 4px 0px;
                position: absolute;
                color: white;
                font-size: 20px;
                text-align: center;
                line-height: 36px;
                right: 0;
                top: 0px;
                cursor: pointer;
            }
        }
        .search  /deep/ .input{
                
                float: right;
                width: 360px;
                height: 36px;
                background: #FFFFFF;
                box-shadow: 0px 4px 10px 0px rgba(64, 45, 20, 0.05);
                border-radius: 4px;
             }
             .search /deep/ .el-input__inner{
                border: none!important;
                outline:none!important;
                box-shadow: 0px 4px 10px 0px rgba(64, 45, 20, 0.05);
             }
</style>